import { useState } from "react"
const Cal = props => {
    let [num, setNum] = useState(10)
    let [todo, setTodo] = useState(["吃饭", "睡觉", "打游戏"])
    // function click1(){
    //     setNum([++num])
    // }
    // function click2(){
    //     setNum([--num])
    // }
    // setTimeout(() => {
    //     setTodo(["今晚打老虎", ...todo])
    // }, 2000)
    const click1 = () => {
        setNum([++num])
    }
    const click2 = () => {
        setNum([--num])
    }
    return (
        <fieldset style={{ textAlign: "center" }}>
            <legend>计数器</legend>
            <button onClick={click1}>+</button>
            &nbsp;
            &nbsp;
            <b>{num}</b>
            &nbsp;
            &nbsp;
            <button onClick={click2}>-</button>
            <ul>
                {
                    todo.map((item, index) => <li key={index}>{item}</li>)
                }
            </ul>
        </fieldset>
    )
}
export default Cal